<template>
  <div>
    ABout - state
    <a-button @click="handleAdd">喜加一 </a-button>
    <span>{{ count }}</span>
    一次要修改的提交
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
  data(){
    return {
      localCount: 10  
    }
  },
  // 方式 1
  // computed: {
  //   count(){
  //     return this.$store.state.count
  //   }
  // },
  // computed: mapState({
  // 方式 2
  //   // count: state => state.count,
  // 方式 3
  //  // count: 'count', // 传字符串参数 'count' 等同于 `state => state.count` 
  // 方式 4
  //   count(state){
  //     return state.count + this.localCount
  //     // 为了能够使用 `this` 获取局部状态，必须使用常规函数
  //   }
  // }),
  // 方式 5
  // 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
  // computed: mapState(['count']),

  // 方式 6
  // 使用对象展开运算符将此对象混入到外部对象中
  computed: {
    otherValue(){
      return null
    },
    ...mapState({
      count: state => state.count
    })
  },

  methods: {
    handleAdd(){
      this.$store.commit("add")
      console.log(" ==> ", this.$store.state.count)
    }
  }
}
</script>